<template>
  <div>
    <el-row>
      <title-frame></title-frame>
    </el-row>
    
    <div class="line"></div>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="1">工作台</el-menu-item>
      <el-submenu index="2">
        <template slot="title">查看</template>
        <el-menu-item index="2-1">运行</el-menu-item>
        <el-menu-item index="2-2">扩展</el-menu-item>
        <el-menu-item index="2-3">输出</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">外观</template>
          <el-menu-item index="2-4-1">全屏</el-menu-item>
          <el-menu-item index="2-4-2">显示状态栏</el-menu-item>
          <el-menu-item index="2-4-3">显示面板</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3"><a href="http://www.qdhzdz.com/" target="_blank">帮助</a></el-menu-item>
    </el-menu>
  </div>
</template>
<script>
  import TitleFrame from './titleFrame/TitleFrame.vue'
  export default {
    name: 'HeaderFrame',
    components: {
      TitleFrame
    },
    data () {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>
<style>
</style>